<template>
	<view class="panel">
		<view class="settlement-img" v-if="row.settlement_status == 2">
			<image src="../../static/orderImgs/settlement/settlement.png" mode=""></image>
		</view>
		<view class="panel-header">
			<view class="header-title">{{row.hotel}}</view>
			<view class="header-more">
				<text @click="toSettlementDetail(row.id)">{{row.settle_tag}}</text>
				<image src="/static/images/right.png" mode=""></image>
			</view>
		</view>
		<view class="panel-body">
			<view class="row">
				<view class="row-col">
					<text>举办日期：</text>
					<text v-if="row.event_date != undefined">{{row.event_date.substring(0,10)}}</text>
				</view>
				<view class="row-col">
					<text>签单日期：</text>
					<text v-if="row.sign_date != undefined">{{row.sign_date.substring(0,10)}}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-col">
					<text>合作模式：</text>
					<text>{{row.cooperation_mode}}</text>
				</view>
				<view class="row-col">
					<text>订单类型：</text>
					<text>{{row.news_type}}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-col">
					<text>新郎姓名：</text>
					<text>{{row.bridegroom}}</text>
				</view>
				<view class="row-col">
					<text>新郎电话：</text>
					<text>{{row.bridegroom_mobile}}</text>
				</view>
			</view>
		</view>
		<view class="panel-footer">
			<view class="panel-text">
				<text>签单公司：</text>
				<text>{{row.company}}</text>
			</view>
			<view class="footer-btn">
				<text class="panel-text">销售:{{row.user.realname}}</text?>
			</view>
			<!-- 
			<view class="footer-btn">
				<button v-if="row.settlement_status == 0" type="default" size="mini" @click="toSettlement(row.id)">结算</button>
				<button v-else-if="row.settlement_status == 1" type="default" size="mini" @click="toSettlement(row.id)">审核</button>
				<button v-else-if="row.settlement_status == 2" type="default" size="mini" @click="toSettlement(row.id)">编辑</button>
			</view> 
			-->
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			row: {
				type: Object,
				value: {}
			}
		},
		data() {
			return {
			
			};
		},
		onLoad() {
		},
		methods: {
			// 订单详情
			toSettlementDetail(e) {
				uni.navigateTo({
					url: '../../order/settlement/confirmTable?id=' + e
				})
			},
			
			// 去结算
			toSettlement(e){
				uni.navigateTo({
					url: '../../order/settlement/confirmTable?id=' + e
				})
			},
		}
	}
</script>

<style lang="less">
	page {
		padding: 0 24upx;
		min-height: calc(100vh - 60px);
		background-color: #f4f4f4;
	}

	.panel {
		position: relative;
		margin-top: 24upx;
		background-color: #fff;
		border-radius: 10px;
		
		.settlement-img{
			position: absolute;
			right: 0;
			width: 200upx;
			height: 200upx;
			
			image{
				width: 100%;
				height: 100%;
			}
		}

		.panel-header {
			position: relative;
			padding: 20upx 32upx;
			display: flex;
			font-size: 28upx;

			.header-title {
				flex: 1;
			}

			.header-more {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				image {
					width: 32upx;
					height: 32upx;
				}

			}

		}

		.panel-header::after {
			position: absolute;
			box-sizing: border-box;
			content: ' ';
			pointer-events: none;
			right: 16px;
			bottom: 0;
			left: 16px;
			border-bottom: 1px solid #ebedf0;
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
		}

		.panel-body {
			position: relative;
			padding: 8upx 16upx;
			font-size: 24upx;

			.row {
				padding: 20upx 32upx;
				display: flex;

				.row-col {
					flex: 1;
				}

			}

		}
		
		.panel-body::after{
			position: absolute;
			box-sizing: border-box;
			content: ' ';
			pointer-events: none;
			right: 16px;
			bottom: 0;
			left: 16px;
			border-bottom: 1px solid #ebedf0;
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
		}
		

		.panel-footer {
			padding: 20upx 38upx;
			display: flex;
			align-items: center;
			
			.panel-text{
				flex: 1;
				font-size: 12px;
			}
			
			.footer-btn{
				flex: 0 20%;
			}
			
			button {
				padding: 0 1em;
				color: #fff;
				background-color: rgb(0, 122, 255);
			}
		}

	}
</style>
